<template>
    <ul class="crumbs">
        <li v-for="(item, index) in crumbArr" :key="index">
            <span>{{ item }}</span><i>/</i>
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    props: ["crumbArr"]
}
</script>
 
<style lang = "less" scoped>
.crumbs {
    display: flex;
    padding: 20px 0;

    li {
        font-size: 16px;
        cursor: pointer;

        i {
            margin-right: 6px;
        }

        &:last-of-type {
            i {
                display: none;
            }
        }

        &:first-of-type {
            span {
                font-weight: bold;
            }
        }
    }
}
</style>